<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-30 14:54:57
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-02-01 15:37:38
 * @FilePath: /health-gpt-website/src/views/Home/components/Page6.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="page6">
    <div class="mainBox">
      <div class="contentBox" id="contentBoxPage6">
        <div class="title">最新动态</div>
        <div class="line"></div>
        <div class="content">
          <div
            v-for="(item, index) in newsData"
            :key="index"
            class="newsItem"
            @click="jumpToDetail(item.id)"
          >
            <img :src="item.bgImg" />
            <div class="titleBox">
              <div class="newsTitle">{{ item.title }}</div>
              <img src="../../../assets/icon/arrow-right.png" />
            </div>
            <div class="newsItem_line"></div>
            <div class="newsItem_content">
              {{ item.content }}
            </div>
            <div class="newsItem_time">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="clickBox" @click="nextPage" v-if="showArrow">
      <div class="arrowDown">
        <img src="../../../assets/icon/arrow-down.png" />
      </div>
    </div>
  </div>
</template>
<script>
import newsBg1 from "../../../assets/bgImg/newsBg1.png"
import newsBg2 from "../../../assets/bgImg/newsBg2.png"
import newsBg3 from "../../../assets/bgImg/newsBg3.png"
export default {
  props: {
    showArrow: false,
  },
  data () {
    return {
      showAnimation: false,
      newsData: [
        {
          title: "全新首发 | AI赋能健康，助力产业升级",
          content: "11月7日至10日，由世界互联网大会和浙江省人民政府主办的2023年互联网之光博览会在乌镇盛大举行。作为互联网大会的重要组成部分，这场迎来“十年之约”，彰显...",
          time: "2024-01-24",
          bgImg: newsBg1,
          id: 0,
        },
        {
          title: "AI智能健康体验中心：健康领域的创新与变革",
          content: "近年来，AI智能健康体验中心在业界内逐渐崭露头角，以其独特的优势和价值，为医疗行业注入了新的活力。从智能诊断、精准治疗到健康管理，AI智能健康体验中心涵...",
          time: "2024-01-24",
          bgImg: newsBg2,
          id: 1,
        },
        {
          title: "银江技术智迎亚运丨健康宝HealthGPT产品正式发布，人工智能助力健康服务",
          content: "9月20日，智迎亚运，银江技术携手智慧健康运营服务平台-健康宝联合发布面向健康服务的HealthGPT产品，发布产品包括健康宝Health AI健康大模型、AI智能终端、...",
          time: "2024-01-24",
          bgImg: newsBg3,
          id: 2,
        }
      ],
    }
  },
  mounted () {
  },
  methods: {
    nextPage () {
      this.$emit('next')
    },
    // 当第一次切换到该页，启用动画
    initAnimation () {
      if (this.showAnimation) { //动画只执行一次
        return false
      }
      // 启用整体文字渲染动画
      let element = document.getElementById("contentBoxPage6")
      element.classList.add("contentBoxAnimation")
      // 下次进入该函数不再执行
      this.showAnimation = true
    },
    // 跳转到新闻详情
    jumpToDetail (id) {
      console.log(id)
      // this.$router.push('/newsDetail?id='+id)
      if (id == 0) {
        window.open('https://mp.weixin.qq.com/s/WVP8PVbncmdE_UZIktRUvA', '_blank');
      } else if (id == 1) {
        window.open('https://mp.weixin.qq.com/s/ppfUTk435M1MSg8VPaPGhg', '_blank');
      } else if (id == 2) {
        window.open('https://mp.weixin.qq.com/s/L1Q2NEtN_iwvCO7eZXKezg', '_blank');
      }
    },
  },
}
</script>
<style scoped lang="less">
.page6 {
  height: 100%;
  width: 100%;
  background: rgb(109, 100, 100);
  display: flex;
  justify-content: center;
  background-image: url(../../../assets/bgImg/bg6.png);
  background-size: 100% 100%;
  background-attachment: fixed;
  .mainBox {
    width: 1200px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .contentBoxAnimation {
      position: absolute;
      animation: popup 1.5s ease-in-out;
      animation-fill-mode: forwards;
      // animation-delay: 1s; /* 设置动画延迟执行时间 */

      @keyframes popup {
        0% {
          top: 50%;
          opacity: 0;
        }
        100% {
          top: 0;
          opacity: 1;
        }
      }
    }
    .contentBox {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      opacity: 0;
      .title {
        font-size: 40px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 60px;
      }
      .line {
        width: 329px;
        height: 4px;
        background: #123be7;
        border-radius: 50px 50px 50px 50px;
      }
      .content {
        width: 100%;
        margin-top: 100px;
        display: flex;
        justify-content: space-between;
        .newsItem {
          width: 352px;
          position: relative;
          cursor: pointer;
          z-index: 99999;
          .mask {
            width: 100%;
            height: 100%;
            background: red;
          }
          img {
            width: 100%;
          }
          .titleBox {
            display: flex;
            height: 50px;
            // padding: 0 15px;
            align-items: center;
            .newsTitle {
              font-size: 16px;
              font-weight: 500;
              flex: 1;
              flex-wrap: wrap;
            }
            img {
              width: 24px;
              height: 24px;
            }
          }
          .newsItem_line {
            width: 100%;
            height: 0px;
            opacity: 1;
            border-bottom: 1px dashed #cccce0;
          }
          .newsItem_content {
            margin-top: 10px;
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 16px;
          }
          .newsItem_time {
            margin-top: 20px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>